import { Button, Row, Col, Divider } from 'antd';
import { Input } from 'antd';
import { Tag } from 'antd';
import styles from './style.less';
import { useState } from 'react';
import { jsonTextToJsonUsingPOST } from '@/services/ctb-service/json';

const { TextArea } = Input;
const JsonFormat: React.FC = () => {
  const [visible, setVisible] = useState(1);
  // 左右两边的json字符串
  const [leftJson, setLeftJson] = useState('');
  const [rightJson, setRightJson] = useState('');
  // 解析结果是否正确
  const [isRight, setIsRight] = useState<boolean>(false);

  const changeVisibleStyle = (index: number) => {
    setVisible(index);
  };

  const visibleEffectTextSize = () => {
    // 上下视图时，文本框的高度为 12 行，左右视图时，文本框的高度为 24 行
    return visible === 2 ? 12 : 24;
  };

  // 调用接口转换json字符串
  const formatJson = async (fields: number) => {
    const res = await jsonTextToJsonUsingPOST({ textArea: leftJson, type: fields });
    if (res.code === 200) {
      setRightJson(res.result);
    } else {
      setIsRight(false);
    }
  };

  // 交换左右两边的json字符串
  const changeText = () => {
    const temp = leftJson;
    setLeftJson(rightJson);
    setRightJson(temp);
  };

  // 返回一个左右两个框的布局
  return (
    <div style={{ marginTop: '50px' }}>
      <Row gutter={[16, 16]} justify="space-around" align="middle">
        <Col span={visible === 1 ? 11 : 22}>
          <div className={styles.jsonFormat_old}>
            <Tag className={styles.jsonFormatTag}>原始JSON文本</Tag>
            <div className={styles.jsonFormatButtonGroup}>
              <Button onClick={() => formatJson(0)}>随机</Button>
              <Button onClick={() => formatJson(1)}>格式化</Button>
              <Button onClick={() => formatJson(2)}>压缩</Button>
              <Button onClick={() => formatJson(3)}>转义</Button>
              <Button onClick={() => formatJson(4)}>反转义</Button>
              <Divider type="vertical" />
              <Button onClick={() => changeVisibleStyle(1)}>左右视图</Button>
              <Button onClick={() => changeVisibleStyle(2)}>上下视图</Button>
              <Button onClick={() => changeText()}>内容交换</Button>
            </div>
            <TextArea
              wrap="off"
              className={styles.jsonFormatTextAreaAround}
              placeholder="请输入JSON文本"
              autoSize={{ minRows: visibleEffectTextSize(), maxRows: visibleEffectTextSize() }}
              allowClear
              showCount
              value={leftJson}
              onChange={(e) => setLeftJson(e.target.value)}
            />
          </div>
        </Col>
        {visible === 1 && (
          <Col span={11}>
            <div className={styles.jsonFormat_new}>
              <Tag className={styles.jsonFormatTagSecond}>转换JSON文本</Tag>
              <div className={styles.jsonFormatTextAreaAround}>
                <TextArea
                  wrap="off"
                  placeholder="转换后的结果将在此展示"
                  autoSize={{ minRows: visibleEffectTextSize(), maxRows: visibleEffectTextSize() }}
                  allowClear
                  showCount
                  value={rightJson}
                  onChange={(e) => setRightJson(e.target.value)}
                />
              </div>
            </div>
          </Col>
        )}
      </Row>
      {visible === 2 && (
        <Row gutter={[16, 16]} justify="space-around" align="middle">
          <Col span={22}>
            <div className={styles.jsonFormat_new}>
              <Tag className={styles.jsonFormatTagSecond}>转换JSON文本</Tag>
              <div className={styles.jsonFormatTextAreaAround}>
                <TextArea
                  wrap="off"
                  placeholder="转换后的结果将在此展示"
                  autoSize={{ minRows: visibleEffectTextSize(), maxRows: visibleEffectTextSize() }}
                  allowClear
                  showCount
                  value={rightJson}
                  onChange={(e) => setRightJson(e.target.value)}
                />
              </div>
            </div>
          </Col>
        </Row>
      )}
    </div>
  );
};

export default JsonFormat;
